*,
*::before,
*::after {
    box-sizing: border-box;
}

:host {
    box-sizing: border-box;
    margin: 0;
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--fg);
}

:host([loaded]) section.overlay,
:host([loading]) section.overlay {
    display: none;
}

:host main {
    display: contents;
}

section.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gradient-purple-blue-dark);
}

section.overlay h1 {
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    font-size: 5em;
    font-weight: 300;
    text-shadow: 0 0 5px var(--gradient-purple-red);
}

section.overlay h1 img {
    width: 1.5em;
}

section.overlay p {
    text-align: center;
    font-size: 1.5em;
    max-width: 50%;
}

section.overlay strong {
    background: var(--gradient-purple-red-highlight);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}

section.overlay a {
    color: #81eeff;
}

section.overlay a:hover {
    color: #a3f3ff;
}

section.overlay input {
    font-size: 1.5em;
    color: var(--fg);
    background: var(--gradient-purple-red);
    max-width: 50%;
}

section.overlay input::placeholder {
    color: var(--fg);
}

section.overlay p.note {
    color: var(--input-placeholder);
    font-size: 1em;
}

section.overlay p.github img {
    width: 2em;
}

kc-board-viewer,
kc-schematic-viewer {
    width: 100%;
    height: 100%;
    flex: 1;
}

.split-horizontal {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.split-vertical {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}

/*                                         */

kc-board-app,
kc-schematic-app {
    width: 100%;
    height: 100%;
    flex: 1;
}
